<template>
  <div class="coal-energy-container">
    <!-- 上半部分 -->
    <div class="top-section">
      <!-- 左侧能耗统计 -->
      <el-card class="statistics-card">
        <template #header>
          <div class="card-header">
            <span>能耗统计</span>
            <el-select 
              v-model="selectedPoint" 
              placeholder="请选择采集点"
              size="default"
            >
              <el-option
                v-for="point in collectionPoints"
                :key="point.value"
                :label="point.label"
                :value="point.value"
              />
            </el-select>
          </div>
        </template>
        <div class="statistics-content">
          <div class="stat-item">
            <div class="label">今日能耗</div>
            <div class="value">{{ statistics.today }} kWh</div>
          </div>
          <div class="stat-item">
            <div class="label">本周能耗</div>
            <div class="value">{{ statistics.week }} kWh</div>
          </div>
          <div class="stat-item">
            <div class="label">本月能耗</div>
            <div class="value">{{ statistics.month }} kWh</div>
          </div>
          <div class="stat-item">
            <div class="label">同比增长</div>
            <div class="value" :class="{ 'up': statistics.yearGrowth > 0, 'down': statistics.yearGrowth < 0 }">
              {{ statistics.yearGrowth }}%
            </div>
          </div>
          <div class="stat-item">
            <div class="label">环比增长</div>
            <div class="value" :class="{ 'up': statistics.monthGrowth > 0, 'down': statistics.monthGrowth < 0 }">
              {{ statistics.monthGrowth }}%
            </div>
          </div>
        </div>
      </el-card>

      <!-- 右侧图表 -->
      <div class="charts-section">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>消耗周统计</span>
            </div>
          </template>
          <div class="chart" ref="weekChartRef"></div>
        </el-card>

        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>消耗月统计</span>
            </div>
          </template>
          <div class="chart" ref="monthChartRef"></div>
        </el-card>
      </div>
    </div>

    <!-- 下半部分：最近上报数据 -->
    <el-card class="report-card">
      <template #header>
        <div class="card-header">
          <span>最近上报数据</span>
          <div class="header-right">
            <el-button type="primary" link @click="refreshData">
              <el-icon><Refresh /></el-icon>刷新
            </el-button>
          </div>
        </div>
      </template>
      <el-table 
        :data="reportData" 
        style="width: 100%"
        :header-cell-style="{ background: 'rgba(255, 255, 255, 0.05)' }"
        v-loading="loading"
      >
        <el-table-column prop="deviceName" label="设备名称" width="150" />
        <el-table-column prop="pointName" label="采集点" width="120" />
        <el-table-column prop="value" label="数值" width="120">
          <template #default="{ row }">
            {{ row.value }} {{ row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'normal' ? 'success' : 'danger'">
              {{ row.status === 'normal' ? '正常' : '异常' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reportTime" label="上报时间" width="180" />
        <el-table-column prop="updateTime" label="更新时间" width="180" />
        <el-table-column prop="operator" label="操作人" width="120" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { Refresh } from '@element-plus/icons-vue'

// 采集点选项
const collectionPoints = [
  { label: 'A采集点', value: 'A' },
  { label: 'B采集点', value: 'B' },
  { label: 'C采集点', value: 'C' }
]
const selectedPoint = ref('A')

// 统计数据
const statistics = ref({
  today: '1,234.56',
  week: '8,765.43',
  month: '32,109.87',
  yearGrowth: 5.2,
  monthGrowth: -2.1
})

// 图表实例
let weekChart: echarts.ECharts | null = null
let monthChart: echarts.ECharts | null = null

// 表格数据
const loading = ref(false)
const reportData = ref([
  {
    deviceName: '1号煤能耗表',
    pointName: 'A采集点',
    value: '123.45',
    unit: 'kWh',
    status: 'normal',
    reportTime: '2024-02-20 14:30:00',
    updateTime: '2024-02-20 14:30:00',
    operator: '张三',
    remark: '正常运行'
  },
  // ... 更多数据
])

// 初始化图表
const initCharts = () => {
  // 周统计图表
  weekChart = echarts.init(document.querySelector('.charts-section .chart-card:first-child .chart'))
  weekChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: 30,
      right: 20,
      bottom: 30,
      left: 50
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      name: 'kWh'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true,
      areaStyle: {
        opacity: 0.3
      }
    }]
  })

  // 月统计图表
  monthChart = echarts.init(document.querySelector('.charts-section .chart-card:last-child .chart'))
  monthChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: 30,
      right: 20,
      bottom: 30,
      left: 50
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value',
      name: 'kWh'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320, 1450, 1200, 1100, 980, 870],
      type: 'line',
      smooth: true,
      areaStyle: {
        opacity: 0.3
      }
    }]
  })
}

// 刷新数据
const refreshData = async () => {
  loading.value = true
  try {
    // 这里添加实际的数据刷新逻辑
    await new Promise(resolve => setTimeout(resolve, 1000))
  } finally {
    loading.value = false
  }
}

// 生命周期钩子
onMounted(() => {
  initCharts()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  weekChart?.dispose()
  monthChart?.dispose()
  window.removeEventListener('resize', handleResize)
})

// 窗口大小变化时重绘图表
const handleResize = () => {
  weekChart?.resize()
  monthChart?.resize()
}
</script>

<style lang="scss" scoped>
.coal-energy-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .top-section {
    display: flex;
    gap: 20px;
    height: 400px;

    .statistics-card {
      width: 300px;
      background: rgba(255, 255, 255, 0.05);
      border: none;

      :deep(.el-card__header) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 12px 20px;
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .statistics-content {
        padding: 20px;

        .stat-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: $text-color-secondary;
          }

          .value {
            font-size: 18px;
            font-weight: bold;
            color: $primary-color;

            &.up {
              color: #f56c6c;
            }

            &.down {
              color: #67c23a;
            }
          }
        }
      }
    }

    .charts-section {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .chart-card {
        flex: 1;
        background: rgba(255, 255, 255, 0.05);
        border: none;

        :deep(.el-card__header) {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
          padding: 12px 20px;
        }

        .chart {
          height: calc(100% - 50px);
        }
      }
    }
  }

  .report-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: none;

    :deep(.el-card__header) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 12px 20px;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    :deep(.el-table) {
      background: transparent;
      
      th.el-table__cell {
        background-color: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: $text-color;
      }
      
      td.el-table__cell {
        background-color: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: $text-color;
      }
    }
  }
}
</style>
